
<template>
    <div class="top-info">
        <div class="org-info">
            <el-popover
                trigger="click"
                placement="bottom"
                v-model="showPopover"
                :visible-arrow="false"
            >
                <div class="top-info__org-popover">
                    <el-image
                    v-if="orgLogo"
                        :src="orgLogo"
                        class="top-info__org-popover--image"
                    ></el-image>
                    <span class="top-info__org-popover--text text-center" :title="userInfo.orgAccountName">{{userInfo.orgAccountName}}</span>
                </div>
                <app-icon
                    slot="reference"
                    iconName="vcloud-yingyong"
                    className="org-info__icon cursor-pointer hover-blue"
                ></app-icon>
            </el-popover>
            <div class="org-info__line"></div>
            <span class="org-info__workspace">工作台</span>
        </div>
        <div class="user-info">
            <div class="user-info__publish cursor-pointer hover-blue">
                <router-link to="/main/saleList">应用上架</router-link>
            </div>
            <el-badge :value="3">
                <div class="user-info__custom cursor-pointer hover-blue">
                    定制接单
                </div>
            </el-badge>

            <app-icon
                iconName="vcloud-help"
                className="user-info__help cursor-pointer hover-blue"
            ></app-icon>
            <el-image v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" class="user-info__avatar"></el-image>
            <div v-else class="user-info__avatar text-center">{{userInfo.name}}</div>
            <el-popover
                trigger="click"
                placement="bottom"
                v-model="showDropdown"
                :visible-arrow="false"
                popper-class="top-info__user-popover"
            >
                <p class="top-info__user-popover--item  cursor-pointer">
                    <app-icon
                        slot="reference"
                        iconName="vcloud-about"
                        className="user-info__select"
                    ></app-icon>
                    关于
                </p>

                <app-icon
                    slot="reference"
                    iconName="vcloud-youjiantou2"
                    className="org-info__icon cursor-pointer hover-blue"
                ></app-icon>
            </el-popover>
        </div>
    </div>
</template>

<script>
import {
    createNamespacedHelpers
} from "vuex";


const {
    mapState
} = createNamespacedHelpers("user");
export default {
    name: "top-info",
    props: {},
    data: () => ({
        showPopover: false,
        showDropdown: false
    }),
    computed: {
        ...mapState([
            "userInfo"
        ]),
        orgLogo() {
            return ""; //this.userInfo && this.userInfo.avatarUrl
        }
    }
};
</script>
<style lang="scss" src="../../../assets/styles/main/topInfo.scss" scoped></style>
<style lang="scss">
.top-info__org-popover {
    width: 239px;
    height: 207px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.top-info__org-popover--image {
    width: 50px;
    height: 50px;
    background: linear-gradient(
        180deg,
        rgba(243, 90, 137, 1) 0%,
        rgba(95, 81, 245, 1) 100%
    );
}
.top-info__org-popover--text {
    width: 160px;
    height: 30px;
    font-size: 22px;
    font-weight: 600;
    line-height: 30px;
    margin-top: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.el-popper.top-info__user-popover {
    padding-left: 0;
    padding-right: 0;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
    border-radius: 2px;
    border: 1px solid rgba(219, 223, 230, 1);
}
.top-info__user-popover--item {
    padding: 4px 12px;
    &:hover {
        background: #ebecf1;
    }
}
</style>
